9.05. Код

ДЛЯ ДЕТЕЙОБЯЗАТЕЛЬНО

Родителям и детям

Код - это текстовые команды, набор инструкций
Компьютер понимает лишь язык электричества - сигнал есть, сигнала нет, 10101
Команды в повседневной жизни (лампочка, робот-пылесос, игрушки на ИК-пульте)
Добавить mermaid схему
Добавить задачи

Глава: Код — язык, на котором разговаривают с машинами

Представьте, что вы хотите научить собаку приносить тапки. Вы не объясняете ей это словами, как другу: «Пожалуйста, сбегай в прихожую, найди мои тапки под креслом и верни их сюда». Вместо этого вы говорите коротко и чётко: «Тапки!», — и делаете жест. Собака учится понимать, что именно означает эта команда, и связывает её с конкретным действием.

Компьютер — как очень послушный, но очень буквальный помощник. Он не понимает намёков, шуток или эмоций. Он выполняет только то, что вы ему сказали — и только так, как вы сказали. Чтобы с ним «договориться», нужен особый язык — код.

Что такое код?

Код — это текстовые инструкции, написанные по строгим правилам, которые понимает компьютер. Это не магия и не заклинания: это просто список шагов, как в рецепте бутерброда:

1. Возьми хлеб.
2. Намажь масло.
3. Положи ломтик сыра.
4. Накрой вторым ломтиком хлеба.

Если перепутать шаги — например, положить сыр до масла — бутерброд получится странным. Так и с кодом: порядок и точность критичны. Даже одна лишняя запятая может «сломать» программу.

Но почему компьютеру нужны текстовые инструкции, если он — машина? Ответ — в его природе.

Как компьютер «думает»: язык нулей и единиц

Внутри любого компьютера — миллиарды крошечных переключателей, называемых транзисторами. Они работают, как микроскопические выключатели света:

• «Включено» → электричество идёт → обозначается как 1
• «Выключено» → электричество не идёт → обозначается как 0

Такой язык из нулей и единиц называется двоичным кодом (binary). Всё, что вы видите на экране — текст, картинки, видео, игра — в итоге превращается в последовательности вроде:

01001001 00100000 01101100 01101111 01110110 01100101 00100000 01001001 01010100

(Кстати, это фраза «I love IT» в двоичном виде.)

Компьютер «понимает» только такие последовательности. Но писать программы вручную на двоичном коде — как строить дом, откручивая каждый винтик по одному: возможно, но безумно долго и легко ошибиться.

Поэтому люди придумали языки программирования — промежуточные языки, ближе к человеческому, но всё ещё точные и формальные. Пример:

print("Привет, Вселенная!")

Эту строчку легко прочитать человеку. А специальная программа — компилятор или интерпретатор — переведёт её в двоичный код, который поймёт процессор.

📌 Важно: код — это не «компьютерный язык», а язык общения между человеком и машиной. Человек описывает логику — машина исполняет.

Код вокруг нас: команды в повседневной жизни

Вы уже сталкивались с кодом — даже если не знали об этом.

• Лампочка с выключателем — простейшая «программа»:
  ЕСЛИ нажата кнопка → ВКЛЮЧИТЬ свет.
  Если выключатель — двухклавишный:
  ЕСЛИ нажата КЛАВИША_1 → включить верхний свет
ЕСЛИ нажата КЛАВИША_2 → включить подсветку

• Робот-пылесос получает инструкции:
  ДВИГАТЬСЯ прямо 2 метра → ПОВЕРНУТЬ направо → ПРОВЕРИТЬ, есть ли препятствие → ЕСЛИ есть — ОСТАНОВИТЬСЯ и выбрать другой путь

• Игрушка на ИК-пульте (инфракрасном): когда вы нажимаете кнопку «Вперёд», пульт посылает кодированный сигнал — короткую вспышку инфракрасного света в определённом ритме. Машина «расшифровывает» этот ритм и понимает: «двигайся вперёд».

Эти примеры показывают главную идею:

Код — это не обязательно текст на экране. Это любая система чётких, однозначных команд, по которым что-то работает.

Как устроен процесс: от идеи до исполнения

Рассмотрим это на схеме. Представьте, что вы хотите написать программу, которая здоровается с пользователем по имени.

Разберём шаги:

1. Идея — то, что вы хотите, чтобы программа сделала.
2. Код — вы описываете идею словами, которые понимает язык программирования (например, Python, JavaScript).
3. Перевод — программа-посредник превращает ваш код в машинные команды.
4. Исполнение — процессор читает эти команды (в виде импульсов тока) и заставляет память, экран, динамик — работать так, как нужно.
5. Результат — человек получает то, что ожидал.

Заметьте: компьютер не понимает смысла. Он не знает, что такое «привет» или «Аня». Он просто копирует символы из памяти на экран — как курьер, который доставляет посылку, не зная, что внутри.

---

Практическое задание №1: «Команды для друга»

🎯 Цель: понять, что значит «точная инструкция».

Попросите друга (или вообразите робота) нарисовать простую картинку — например, дом с окном и дверью — только по вашим устным командам. Но есть правила:

• Вы не можете показывать, говорить «вот так» или «вот сюда».
• Только команды вида:
  НАРИСУЙ квадрат со стороной 5 см,
  ПОСТАВЬ точку в центре верхней стороны квадрата,
  ПРОВЕДИ линию от этой точки до левого верхнего угла и т.д.

После попытки обсудите:

• Где возникли недопонимания?
• Какие команды были неоднозначными?
• Что нужно уточнить, чтобы рисунок получился точно как задумано?

Это упражнение — про ту самую точность, которая критична в коде.

---

Практическое задание №2: «Двоичное имя»

Каждая буква в компьютере имеет свой номер (стандарт называется ASCII или Unicode). Например:

Буква	Десятичный код	Двоичный код
А	192 (в Windows-1251)	11000000
a	97	01100001
0	48	00110000

Возьмите своё имя и переведите первыми три буквы в двоичный код.
Можно воспользоваться онлайн-конвертером (например, https://www.rapidtables.com/convert/number/ascii-to-binary.html) — но сначала попробуйте вручную, используя таблицу ASCII.

💡 Подсказка: в Unicode буква «А» — это U+0410, что в двоичном виде — 00000100 00010000. Но для упрощения можно использовать ASCII/Latin-1 часть: например, «Tim» → T=84=01010100, i=105=01101001, m=109=01101101.

Запишите:

Моё имя (первые 3 буквы): ___
Двоичный код: ___ ___ ___

Это — ваш первый «машинный текст».

---

Практическое задание №3: «Код без компьютера»

Напишите алгоритм для автомата по выдаче сока.
Автомат принимает монеты (10₽, 50₽), продаёт сок за 40₽. Он может:

• Принять монету
• Проверить сумму
• Выдать сок
• Вернуть сдачу
• Показать сообщение на экране

Опишите последовательность действий человека, который хочет купить сок, через команды вида:

НАЧАЛО  
ВСТАВИТЬ монету 50₽  
ЕСЛИ сумма >= 40₽:  
    ВЫДАТЬ сок  
    ЕСЛИ сумма > 40₽:  
        ВЕРНУТЬ сдачу (сумма - 40)  
    КОНЕЦ ЕСЛИ  
ИНАЧЕ:  
    ПОКАЖИ надпись: "Недостаточно денег"  
КОНЕЦ ЕСЛИ  
КОНЕЦ  

Это — псевдокод: смесь русского языка и структур программирования. Так программисты думают до того, как писать настоящий код.

---

Часть 2. Как строится код: кирпичики логики

Если представить программу как дом, то код — это не просто кирпичи, а конструктор с инструкцией. В нём есть базовые элементы, из которых можно собрать что угодно — от калькулятора до космического симулятора. Давайте познакомимся с тремя главными «деталями»: переменная, условие, цикл.

1. Переменная — коробка с этикеткой

Представьте, что вы убираете игрушки в коробки. На каждую вы клеите этикетку: «машинки», «кубики», «мягкие игрушки». Внутрь можно класть разное — сегодня три машинки, завтра пять. Этикетка остаётся той же, а содержимое — меняется.

Переменная в коде — это как такая коробка с этикеткой.

• Имя переменной — это этикетка (например, возраст, счёт, имя_игрока).
• Значение — то, что лежит внутри (например, 12, 100500, "Алиса").

Пример на Python:

имя = "Саша"
возраст = 10
счёт = 0

Здесь мы «наклеили» три этикетки и положили в коробки данные. Позже можно изменить содержимое:

счёт = счёт + 10   # теперь в коробке "счёт" лежит 10
возраст = возраст + 1  # Саше исполнилось 11

🔍 Почему счёт = счёт + 10 не противоречит математике?
В математике такое уравнение бессмысленно: x = x + 10 → 0 = 10.
Но в коде это команда, а не равенство:
«Возьми текущее значение из коробки счёт, прибавь 10, и положи результат обратно в ту же коробку».

Переменные — основа любого взаимодействия с пользователем. Без них невозможно запомнить, что ввёл человек, сколько очков набрал игрок или какая температура за окном.

---

2. Условие — развилка на дороге

Жизнь полна выбора:

• Если на улице дождь — взять зонт.
• Если в холодильнике молоко закончилось — купить в магазине.
• Если в игре здоровье ≤ 0 — показать экран «Game Over».

В коде такие развилки реализуются через условные конструкции — чаще всего словами ЕСЛИ (if), ИНАЧЕ (else).

Пример: программа-помощник для сбора рюкзака в поход.

погода = "дождь"      # ← можно изменить на "солнечно"

ЕСЛИ погода == "дождь":
    добавить_в_рюкзак("дождевик")
    добавить_в_рюкзак("резиновые сапоги")
ИНАЧЕ:
    добавить_в_рюкзак("кепку")
    добавить_в_рюкзак("крем от солнца")

Обратите внимание на два знака = в погода == "дождь":

• Один = — это присвоение (положить в коробку).
• Два == — это сравнение (проверить, совпадает ли содержимое).

Можно строить сложные условия:

ЕСЛИ температура < 0 И идёт_снег:
    надеть("тёплую шапку")
ИНАЧЕ ЕСЛИ температура > 30:
    надеть("лёгкую рубашку")
ИНАЧЕ:
    надеть("ветровку")

Чем больше условий, тем «умнее» становится программа. Но важно не запутаться — как в лабиринте, где каждая дверь ведёт к новой развилке.

---

3. Цикл — делать одно и то же, но много раз

Повторение — основа обучения и работы. Чтобы наточить карандаш, вы крутите его в точилке 10–15 раз. Чтобы подняться на 5-й этаж, делаете ~70 шагов. В реальной жизни мы не считаем каждый шаг — просто идём. Но компьютеру нужно сказать: «Сделай это N раз».

Для этого существуют циклы — конструкции, которые повторяют блок команд.

Цикл ПОВТОРИТЬ N раз (for)

ПОВТОРИТЬ 5 раз:
    сказать("Привет!")

→ На экране появится:

Привет!  
Привет!  
Привет!  
Привет!  
Привет!

В более зрелых языках (например, Python) это выглядит так:

for i in range(5):
    print("Привет!")

Здесь i — счётчик: он автоматически меняется от 0 до 4, помогая отслеживать, на каком шаге мы находимся.

Цикл ПОКА условие истинно (while)

стакан = 0  # мл воды
ПОКА стакан < 200:      # стакан вмещает 200 мл
    налить(50)          # добавляем по 50 мл
    стакан = стакан + 50
    сказать("Теперь в стакане", стакан, "мл")

Вывод:

Теперь в стакане 50 мл  
Теперь в стакане 100 мл  
Теперь в стакане 150 мл  
Теперь в стакане 200 мл  

На 250 мл цикл не пойдёт — условие стакан < 200 станет ложным, и повторение остановится.

⚠️ Опасность: если забыть изменить условие внутри цикла — получится бесконечный цикл.
Пример аварии:

while температура < 100:
    включить_нагрев()   # ← но не измеряем температуру снова!

Программа «застрянет», потому что температура никогда не обновится.

---

Почему столько языков программирования?

Вы, наверное, слышали названия: Python, JavaScript, Scratch, C++, Lua, Rust… Зачем их так много? Разве нельзя договориться об одном?

Представьте инструменты:

• Молоток — чтобы вбить гвоздь.
• Отвёртка — чтобы закрутить шуруп.
• Паяльник — чтобы соединить провода в наушниках.

Все они «делают дырки» или «соединяют», но в разных ситуациях. Так и с языками:

Язык	Для чего подходит	Примеры использования	«Возраст» обучения
Scratch	Первые шаги, визуальное программирование	Анимации, простые игры	7–12 лет
Python	Универсальный, простой синтаксис	Научные расчёты, веб, анализ данных, обучение ИИ	10+
JavaScript	Всё, что работает в браузере	Интерактивные сайты, игры онлайн	12+
Lua	Встраивается в другие программы	Скрипты в играх (Roblox, Minecraft моды)	11+
C++	Высокая скорость и контроль над железом	Видеоигры, операционные системы	14+

✅ Главное — не язык, а логика. Освоив переменную, условие, цикл в Scratch, вы легко перенесёте эти знания в Python — как научившись ездить на велосипеде, легко освоить самокат.

---

Практика: ваш первый работающий код — прямо в браузере

Нам не нужен сложный софт. Достаточно любого браузера (Chrome, Firefox, Edge, Safari) и 5 минут.

Шаг 1. Откройте консоль разработчика

• Нажмите F12 на клавиатуре (или Ctrl+Shift+J на Windows / Cmd+Option+J на Mac).
• Появится панель — найдите вкладку Console («Консоль»).

Это — интерактивный терминал для языка JavaScript, который понимает любой браузер.

Шаг 2. Напишите первую команду

В консоли введите (и нажмите Enter):

alert("Привет, Код!");

→ Всплывёт окошко с приветствием! Это — настоящая программа, запущенная на вашем компьютере.

Шаг 3. Поэкспериментируйте с переменными и условиями

let имя = "Мария";
let возраст = 13;

if (возраст >= 12) {
    console.log(имя + ", ты уже можешь программировать на JavaScript!");
} else {
    console.log("Скоро и ты начнёшь — у тебя всё впереди!");
}

Нажмите Enter. Результат появится в консоли ниже.
Попробуйте изменить возраст на 10 — что изменится?

📝 console.log() — команда «напечатай в консоли». Без всплывающего окна, тихо и удобно для отладки.

Шаг 4. Цикл в действии

for (let i = 1; i <= 5; i++) {
    console.log("Шаг номер", i);
}

Вы увидите:

Шаг номер 1  
Шаг номер 2  
Шаг номер 3  
Шаг номер 4  
Шаг номер 5  

Попробуйте заменить 5 на 100 — браузер мгновенно выведет все 100 строк. Это и есть сила кода: автоматизация повторяющихся действий.

---

Практическое задание №4: «Угадай число» (мысленный прототип)

Представьте игру: компьютер загадывает число от 1 до 10. Игрок вводит свои варианты. Программа отвечает:

• «Больше!»
• «Меньше!»
• «Угадал за N попыток!»

Напишите алгоритм этой игры на псевдокоде (на русском, с отступами), используя:

• переменные (загаданное, попытка, счётчик)
• условие (ЕСЛИ … ИНАЧЕ)
• цикл (ПОКА не угадано)

Пример начала:

загаданное = случайное_число_от(1, 10)
счётчик = 0
угадано = ЛОЖЬ

ПОКА угадано == ЛОЖЬ:
    попытка = спросить_у_игрока("Какое число?")
    счётчик = счётчик + 1
    ЕСЛИ попытка == загаданное:
        сказать("Ура! Ты угадал за", счётчик, "попыток!")
        угадано = ИСТИНА
    ИНАЧЕ ЕСЛИ попытка < загаданное:
        сказать("Больше!")
    ИНАЧЕ:
        сказать("Меньше!")

💡 Подсказка: в реальном коде случайное_число_от(1,10) — это, например, Math.floor(Math.random() * 10) + 1 в JavaScript.

---

Практическое задание №5: «Бот-советчик»

Придумайте простого «умного помощника» для какой-нибудь ситуации:

• выбор фильма (по настроению и возрасту),
• сбор школьного рюкзака (по расписанию),
• приготовление бутерброда (с учётом аллергии).

Опишите:

1. Какие входные данные ему нужны (что спросить у пользователя)?
2. Какие переменные понадобятся?
3. Какие условия будут влиять на решение?
4. Где может пригодиться цикл? (например, «добавляй ингредиенты, пока не скажешь ‘хватит’»)

Напишите 5–7 строк псевдокода. Это — черновик будущей программы.

---

Часть 3. Ошибки — не провал, а разговор с машиной

Когда вы учитесь кататься на велосипеде, падения не означают, что вы «не созданы для езды». Они показывают: «Слишком резко повернул», «Ногу не поставил вовремя», «Скорость не сбавил на повороте».

То же — с кодом. Ошибки (bugs) неизбежны. Даже у самых опытных программистов в коде бывают опечатки, логические недосмотры или неверные предположения. Разница в том, что профессионалы умеют читать сообщения об ошибках и превращают их в шаги к исправлению.

Три основных типа ошибок

1. Синтаксические ошибки («опечатки»)

Это нарушения правил языка — как грамматические ошибки в письме. Компьютер не может даже начать выполнять такой код.

Пример (JavaScript):

console.log("Привет"

→ пропущена закрывающая скобка и кавычка.
Сообщение в консоли:
SyntaxError: Unexpected end of input
(«Синтаксическая ошибка: неожиданный конец ввода»)

💡 Как исправить: внимательно сверить скобки, кавычки, точки с запятой. Браузер даже подсвечивает строку с ошибкой.

2. Ошибки времени выполнения («сломалось при запуске»)

Код синтаксически верен, но «ломается» в процессе работы — например, при обращении к несуществующему объекту.

Пример:

let возраст = "пятнадцать";  // текст, а не число
let через_год = возраст + 1;
console.log(через_год);  // → "пятнадцать1"

Ожидали 16, получили "пятнадцать1". Почему? Потому что в JavaScript при сложении строки и числа — число превращается в строку, и происходит склеивание ("пятнадцать" + "1").

Это не ошибка в строгом смысле (программа не упала), но логическая неточность. Такие ошибки самые коварные — программа «работает», но даёт неверный результат.

3. Логические ошибки («думал одно — сделал другое»)

Код запускается, не падает, не ругается — но ведёт себя не так, как задумано.

Пример:

// Хотим проверить, чётное ли число
let n = 4;
if (n % 2 = 0) {   // ← ОЙ! Должно быть ==, а не =
    console.log("Чётное");
}

Здесь n % 2 = 0 — это попытка присвоить 0 остатку от деления, что запрещено (остаток — результат вычисления, его нельзя перезаписать). В некоторых языках это вызовет ошибку, в JavaScript — молчаливый сбой или false.

Правильно:

if (n % 2 === 0) {   // тройное === — строгое сравнение (значение + тип)
    console.log("Чётное");
}

🔎 Строгий совет: всегда используйте === и !== вместо ==/!=, если не уверены. Это предотвращает неожиданные приведения типов.

---

Как искать ошибки? Три приёма

1. Читайте сообщение. Оно почти всегда говорит:

   • что пошло не так (Cannot read property 'x' of undefined),
   • где (файл, строка, столбец),
   • иногда — почему.

2. Выводите промежуточные значения через console.log():

let a = 5;
let b = 0;
console.log("a =", a, "b =", b);  // ← проверяем до деления
let c = a / b;
console.log("c =", c);  // → Infinity — ага, деление на ноль!

3. Разбивайте задачу на мелкие шаги.
   Вместо:

   let результат = преобразовать(получитьДанные().фильтр(x => x > 0).map(y => y * 2));

   — лучше:

let данные = получитьДанные();
console.log("Данные:", данные);

let положительные = данные.filter(x => x > 0);
console.log("Положительные:", положительные);

let удвоенные = положительные.map(y => y * 2);
console.log("Удвоенные:", удвоенные);

let результат = преобразовать(удвоенные);

Каждый console.log — как контрольный пункт на маршруте. Ошибка не пройдёт незамеченной.

📌 Философия программиста:
«Код пишется один раз, а читается — сотни раз. Пишите так, чтобы через месяц (или коллега) понял вашу логику с первого взгляда».

---

От абстракции — к интерактиву: ваше первое приложение

Пора перейти от консоли к экрану. Мы создадим кнопку-счётчик — приложение, где:

• есть кнопка «+1»,
• при нажатии число увеличивается на 1,
• результат отображается на странице.

Всё это — в одном файле, без установки программ.

Шаг 1. Создайте файл счётчик.html

Откройте Блокнот (Notepad), VS Code или любой текстовый редактор. Вставьте:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый счётчик</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f8ff;
        }
        #счёт {
            font-size: 4em;
            color: #2c3e50;
            margin: 20px;
        }
        button {
            font-size: 1.5em;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <h1>🔢 Счётчик</h1>
    <div id="счёт">0</div>
    <button onclick="увеличить()">+1</button>

    <script>
        let значение = 0;
        const элемент = document.getElementById("счёт");

        function увеличить() {
            значение = значение + 1;
            элемент.textContent = значение;
        }
    </script>
</body>
</html>

Шаг 2. Сохраните и откройте

• Сохраните файл как счётчик.html (важно: расширение .html, не .txt).
• Дважды кликните по файлу — он откроется в браузере.
• Нажимайте кнопку — число растёт!

---

Как это работает? Разбор по строкам

Часть	Что делает	Почему важно
<div id="счёт">0</div>	Элемент на странице, куда будем писать число. У него есть уникальный id — как имя в классном журнале.	Чтобы JavaScript мог его найти.
document.getElementById("счёт")	«Найди элемент с id = "счёт" и запомни его в переменной элемент».	Без этого JavaScript не знает, куда выводить число.
function увеличить()	Объявление функции — «инструкция на будущее». Пока не выполняется, только запоминается.	Чтобы можно было вызывать её много раз (при каждом нажатии).
элемент.textContent = значение	Берём содержимое переменной значение и ставим его внутрь блока <div>.	Так меняется то, что видит пользователь.

💡 Заметили: onclick="увеличить()" — это связь между действием пользователя (клик) и кодом (функция). Так работают все интерактивные сайты.

---

Усложнение: добавим «Сброс» и «-1»

Измените тело <body> так:

<body>
    <h1>🔢 Умный счётчик</h1>
    <div id="счёт">0</div>
    <div style="margin: 20px;">
        <button onclick="уменьшить()">−1</button>
        <button onclick="сбросить()">Сброс</button>
        <button onclick="увеличить()">+1</button>
    </div>

    <script>
        let значение = 0;
        const элемент = document.getElementById("счёт");

        function обновить() {
            элемент.textContent = значение;
        }

        function увеличить() {
            значение = значение + 1;
            обновить();
        }

        function уменьшить() {
            значение = значение - 1;
            обновить();
        }

        function сбросить() {
            значение = 0;
            обновить();
        }
    </script>
</body>

Теперь три кнопки — и выносим обновить() в отдельную функцию, чтобы не повторять элемент.textContent = значение трижды. Это — рефакторинг: улучшение структуры кода без изменения поведения.

✅ Принцип DRY: Don’t Repeat Yourself («Не повторяйся»). Повторяющийся код — рассадник ошибок.

---

Практическое задание №6: «Цитата дня»

Создайте страницу, которая при нажатии кнопки показывает случайную цитату из списка.

Требования:

• минимум 5 цитат (можно про науку, дружбу, терпение),
• при каждом нажатии — новая цитата (или та же, но случайно),
• под цитатой — автор.
• (опционально) добавьте кнопку «Копировать» — чтобы можно было вставить цитату в чат.

Подсказка:

let цитаты = [
    { текст: "Наука — это организованное знание.", автор: "Герберт Спенсер" },
    { текст: "Программирование — это не инструмент...", автор: "Сеймур Пейперт" },
    // добавьте ещё 3
];
let случайный_индекс = Math.floor(Math.random() * цитаты.length);
let выбранная = цитаты[случайный_индекс];

Оформите страницу красиво — цвета, шрифты, тень под цитатой. Это ваша первая веб-страница с логикой.

---

Практическое задание №7: «Анализ ошибок»

Возьмите любой из приведённых выше примеров (например, счётчик) и специально внесите по одной ошибке каждого типа:

1. Синтаксическая: удалите } у функции.
2. Времени выполнения: попытайтесь обратиться к document.getElementById("несуществующий_id"), а потом сделать .textContent = ....
3. Логическая: в увеличить() напишите значение = значение + 0.

Запустите — посмотрите, какие сообщения появятся в консоли (F12 → Console). Запишите:

• Какая ошибка возникла?
• Что написано в сообщении?
• Как вы её нашли и исправили?

Это упражнение научит вас «говорить на языке отладчика».

---